require('../../stylesheet/demo.scss');
import React from 'react'
import {connect} from 'react-redux'
var Api = require('./api');
var Emoji = require('./components/chat/emoji');
var Language = require('./components/language');

// import emoji
WebIM.Emoji = Emoji;


// global log method
window.log = Api.log;

window.Demo = {
    groupType: 'groupchat'
};

// import language package
// Demo.lan = Language.English;
Demo.lan = Language.Chinese;

// for webview in client
Demo.api = Api;

Demo.roster = {};
Demo.strangers = {};

Demo.IMGTYPE = {
    gif: 1,
    bmp: 1,
    jpg: 1,
    png: 1
};

Demo.FILETYPE = {
    gif: 1,
    bmp: 1,
    jpg: 1,
    png: 1,
    zip: 1,
    txt: 1,
    doc: 1,
    pdf: 1
};

Demo.AUDIOTYPE = {
    mp3: 1,
    amr: 1,
    wmv: 1
};

// initialize webIM connection
Demo.conn = new WebIM.connection({
    isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
    https : typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
    url: WebIM.config.xmppURL,
    appkey: WebIM.config.appkey,
    isAutoLogin: WebIM.config.isAutoLogin
});

//Demo.api.render(document.getElementById('demo'));
export class ImEntry extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            to:this.props.to
        }
    }
    signin(user) {
        var username = user.easemob_id;
        var auth = user.easemob_id;
        //var type = this.refs.token.refs.input.checked;

        if ( !username || !auth ) {
            //Notify.error(Demo.lan.notEmpty);
            return false;
        }

        var options = {
            apiUrl : WebIM.config.apiURL,
            user : username.toLowerCase(),
            accessToken : false,
            pwd : auth,
            appKey : WebIM.config.appkey
        };

        /*if ( !type ) {
            delete options.accessToken;
        }*/
        Demo.user = user.name;

        //this.props.loading('show');
        Demo.conn.open(options);
    }
    initIm(){
        const _imEntry = document.getElementById('im-entry'),
          user_info = this.props.user.user,
          specialist_id = user_info.account_id,
          to = this.state.to;
        Demo.api.render(_imEntry,'stranger',specialist_id,to);
        //delete Demo.strangers;
        Demo.strangers = {};
        Demo.strangers[to.eid]=[];
        Demo.selectedCate = 'stranger';
        Demo.selected = to.eid;
        Demo.toName = to.name;
        this.signin(user_info)
    }
    componentWillReceiveProps(nextProp){
        Demo.api.logout();
        this.setState({
            to:nextProp.to
        },function(){
            this.initIm();
        })
    }
    componentDidMount(){
        this.initIm()
    }
    componentWillUnmount(){
        Demo.api.logout()
    }
    render(){
        return (
          <div id="im-entry" style={{
            height:'600px'
          }}></div>
        )
    }
}